<template>
    <div>
        <div class="nav">
             <el-menu
                class="el-menu-demo"
                mode="horizontal"
            >
                <el-menu-item index="1" @click="handleRouterPush('index')">首页</el-menu-item>
                <el-sub-menu index="2">
                    <template #title>只有这个可用</template>
                <el-menu-item index="2-1" @click="handleRouterPush('businessUsers')">客户</el-menu-item>
                <el-menu-item index="2-2">只有上面的可用</el-menu-item>
                <el-menu-item index="2-3">xxxx</el-menu-item>
                <el-sub-menu index="2-4">
                    <template #title>xxxx2</template>
                    <el-menu-item index="2-4-1">xxxx</el-menu-item>
                    <el-menu-item index="2-4-2">xxxx</el-menu-item>
                    <el-menu-item index="2-4-3">xxxx</el-menu-item>
                </el-sub-menu>
                </el-sub-menu>
            </el-menu>
        </div>

        <main>
            <div v-if="currentRoute === 'index'">
                首页
            </div>
            <template v-else>
                <router-view />
            </template>
        </main>
    </div>
</template>

<script setup>
import { ref,watchEffect } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();
let currentRoute = ref(router.currentRoute.value.name);
const handleRouterPush = (name)=>{
    console.log('跳转路由',name)
    router.push({
        name
    });
}

watchEffect(()=>{
    currentRoute.value = router.currentRoute.value.name;
    console.log('监听路由',currentRoute.value)
});
</script>

<style lang="scss" scoped>
.nav{
    width:100vw;
}
main{
    width: 100vw;
    height: calc(100vh - 59px);
    padding:12px;
    box-sizing:border-box;

}
</style>